<template>
  <h1>鼠标的X：{{ x }}</h1>
  <h1>鼠标的Y：{{ y }}</h1>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted } from 'vue'
export default {
 name: 'App',
  setup() {
    // 定义数据
    const mouse = reactive({
      x: 0,
      y: 0
    })

    // 鼠标移动修改数据
    const setDataOnMove = e => {
      mouse.x = e.x
      mouse.y = e.y
    }

    // 绑定鼠标事件
    onMounted(() => {
      document.addEventListener('mousemove', setDataOnMove)
    })

    // 1.4 组件消耗，删除事件
    onUnmounted(()=>{
      document.removeEventListener('mousemove', move)
    })
    return mouse
  }
}
</script>